TeamStats.renderTeamSquadStats - Code Metrics - Inspection of "Team stats." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/player-stats ( 32be2a )

by Kevin Van

created 2021-03-18 13:20 UTC

TeamStats.renderTeamSquadStats B

↳ Parent: TeamStats

Complexity

Conditions

Size

Total Lines	192
Code Lines	145

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	2
eloc	145
dl	0
loc	192
rs	7
c	0
b	0
f	0

How to fix Long Method

import React, { Component } from "react"
import { graphql, StaticQuery } from "gatsby"

import { translateGameResult } from "../scripts/helper"

import Icon from "../components/icon"

import iconBench from "../images/i_bench_2.png"
import iconCleansheet from "../images/i_cleansheet.png"
import iconCardRed from "../images/i_card_red.png"
import iconCardYellowRed from "../images/i_card_yellow_red.png"
import iconCardYellow from "../images/i_card_yellow.png"
import iconGoal from "../images/i_goal.png"
import iconStart from "../images/i_start.png"
import iconSubIn from "../images/i_sub_in.png"
import iconSubOut from "../images/i_sub_out.png"

import "./team--stats.scss"

class TeamStats extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    const {
      config: {
        site: {
          siteMetadata: { kcvvPsdApi },
        },
      },
      // player: { field_vv_id: playerId },
    } = this.props

    this.kcvvPsdApi = kcvvPsdApi
    this.teamId = 1
  }

  updateData() {
    if (this.teamId === null) {
      return
    }

    const apiUrl = `${this.kcvvPsdApi}/stats/team/${this.teamId}`

    fetch(apiUrl)
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))
  }

  componentDidMount() {
    this.updateData()
  }

  mapGameStatus(status) {

  }

  renderTeamStats = (team) => {
    if (this.state.loading === false && this.state.data) {
      const {
        extraStats = {}
      } = this.state.data
      return (
        <article className={"team__stats__detail card"}>
          <header className={"card__header"}>
            <h4>Overzicht</h4>
          </header>
          <div className={"card__content  team__stats__detail--team_stats"}>
            <span className={"team__stats--label"}>Gespeeld</span>
            <span className={"team__stats--stat"}>
              {extraStats.gamesPlayed}
            </span>
            <span className={"team__stats--label"}>Gewonnen</span>
            <span className={"team__stats--stat"}>{extraStats.gamesWon}</span>
            <span className={"team__stats--label"}>Gelijk</span>
            <span className={"team__stats--stat"}>{extraStats.gamesEqual}</span>
            <span className={"team__stats--label"}>Verloren</span>
            <span className={"team__stats--stat"}>{extraStats.gamesLost}</span>
            <span className={"team__stats--label"}>Doelpunten</span>
            <span className={"team__stats--stat"}>
              {extraStats.goalsScored} voor / {extraStats.goalsAgainst} tegen
            </span>
            <span className={"team__stats--label"}>Cleansheets</span>
            <span className={"team__stats--stat"}>
              {extraStats.cleanSheets}
            </span>
            <span className={"team__stats--label"}>Gele kaarten</span>
            <span className={"team__stats--stat"}>
              {extraStats.yellowCards}
            </span>
            <span className={"team__stats--label"}>Rode kaarten</span>
            <span className={"team__stats--stat"}>{extraStats.redCards}</span>
            <span className={"team__stats--label"}>
              Wedstrijden niet gescoord
            </span>
            <span className={"team__stats--stat"}>{extraStats.notScored}</span>
            <span className={"team__stats--label"}>Grootste overwinning</span>
            <span className={"team__stats--stat"}>
              {extraStats.biggestWin.result} tegen{" "}
              {extraStats.biggestWin.opponent}
            </span>
            <span className={"team__stats--label"}>Grootste verlies</span>
            <span className={"team__stats--stat"}>
              {extraStats.biggestLoss.result} tegen{" "}
              {extraStats.biggestLoss.opponent}
            </span>
            <span className={"team__stats--label"}>Meeste doelpunten</span>
            <span className={"team__stats--stat"}>
              {extraStats.mostGoals.result} tegen{" "}
              {extraStats.mostGoals.opponent}
            </span>
            <span className={"team__stats--label"}>Topschutters</span>
            <span className={"team__stats--stat"}>
              {extraStats.topscorers.sort((a, b) => b.value - a.value).map((player, i) => (
                <>{player.firstName} {player.lastName} ({player.value})<br/></>
              ))}
            </span>
            <span className={"team__stats--label"}>Laatste wedstrijden</span>
            <span className={"team__stats--stat"}>
              {extraStats.gameStreak.map((game, i) => (
                <span
                  className={`team__stats__streak team__stats__streak--${game.result.toLowerCase()}`}
                  title={`${translateGameResult(game.result)}`}
                >
                  {game.result.charAt(0) !== "E" ? game.result.charAt(0) : "D"}
                </span>
              ))}
            </span>
          </div>
        </article>
      )
    }
  }

  renderTeamSquadStats = (team) => {
    if (this.state.loading === false && this.state.data) {
      const {
        squadPlayerStatistics = [],
      } = this.state.data

      squadPlayerStatistics.sort((a, b) => b.minutes - a.minutes)

      return (
        <article className={"team__stats__detail card"}>
          <header className={"card__header"}>
            <h4>Spelers</h4>
          </header>
          <div className={"card__content"}>
            <table className={"team__stats__table team__stats__table--players"}>
              <thead>
                <tr>
                  <th
                    className={
                      "team__stats__column team__stats__column--string"
                    }
                  >
                    Speler
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <span title="Wedstrijden gespeeld">P</span>
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <span title="Wedstrijden gewonnen">W</span>
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <span title="Wedstrijden gelijkgespeeld">D</span>
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <span title="Wedstrijden verloren">L</span>
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <img
                      src={iconCardYellow}
                      title="Gele kaart"
                      alt="Gele kaart"
                      className="team__stats__header_icon"
                    />
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <img
                      src={iconCardRed}
                      title="Rode kaart"
                      alt="Rode kaart"
                      className="team__stats__header_icon"
                    />
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <img
                      src={iconGoal}
                      title="Doelpunt(en) gescoord"
                      alt="Doelpunt(en) gescoord"
                      className="team__stats__header_icon"
                    />
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <img
                      src={iconCleansheet}
                      title="Cleansheets"
                      alt="Cleansheets"
                      className="team__stats__header_icon"
                    />
                  </th>
                  <th
                    className={
                      "team__stats__column team__stats__column--number"
                    }
                  >
                    <span title="Minuten gespeeld">
                      <Icon icon="fa-clock-o" />
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody>
                {squadPlayerStatistics.map(function (player) {
                  return (
                    <tr>
                      <td
                        className={
                          "team__stats__column team__stats__column--string"
                        }
                      >
                        {player.firstName} {player.lastName}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.gamesPlayed}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.gamesWon}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.gamesEqual}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.gamesLost}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.yellowCards}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.redCards}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.goals}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.cleanSheets}
                      </td>
                      <td
                        className={
                          "team__stats__column team__stats__column--number"
                        }
                      >
                        {player.minutes || "0"}'
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        </article>
      )
    }
  }

  render () {
    const { team } = this.props;

    return (
      <section className={"team__stats__wrapper"}>{this.renderTeamStats(team)}{this.renderTeamSquadStats(team)}</section>
    )
  }
}

// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
const query = graphql`
  query {
    site {
      siteMetadata {
        kcvvPsdApi
      }
    }
  }
`

export default ({ team }) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <TeamStats
        // Data is the result of our query.
        config={data}
        team={team}
      />
    )}
  />
)


1			import React, { Component } from "react"
2			import { graphql, StaticQuery } from "gatsby"
3
4			import { translateGameResult } from "../scripts/helper"
5
6			import Icon from "../components/icon"
7
8			import iconBench from "../images/i_bench_2.png"
9			import iconCleansheet from "../images/i_cleansheet.png"
10			import iconCardRed from "../images/i_card_red.png"
11			import iconCardYellowRed from "../images/i_card_yellow_red.png"
12			import iconCardYellow from "../images/i_card_yellow.png"
13			import iconGoal from "../images/i_goal.png"
14			import iconStart from "../images/i_start.png"
15			import iconSubIn from "../images/i_sub_in.png"
16			import iconSubOut from "../images/i_sub_out.png"
17
18			import "./team--stats.scss"
19
20			class TeamStats extends Component {
21			constructor(props) {
22			super(props)
23
24			this.state = {
25			data: [],
26			loading: true,
27			}
28
29			const {
30			config: {
31			site: {
32			siteMetadata: { kcvvPsdApi },
33			},
34			},
35			// player: { field_vv_id: playerId },
36			} = this.props
37
38			this.kcvvPsdApi = kcvvPsdApi
39			this.teamId = 1
40			}
41
42			updateData() {
43			if (this.teamId === null) {
44			return
45			}
46
47			const apiUrl = `${this.kcvvPsdApi}/stats/team/${this.teamId}`
48
49			fetch(apiUrl)
50			.then((response) => response.json())
51			.then((json) => this.setState({ data: json, loading: false }))
52			}
53
54			componentDidMount() {
55			this.updateData()
56			}
57
58			mapGameStatus(status) {
59
60			}
61
62			renderTeamStats = (team) => {
63			if (this.state.loading === false && this.state.data) {
64			const {
65			extraStats = {}
66			} = this.state.data
67			return (
68			<article className={"team__stats__detail card"}>
69			<header className={"card__header"}>
70			<h4>Overzicht</h4>
71			</header>
72			<div className={"card__content team__stats__detail--team_stats"}>
73			<span className={"team__stats--label"}>Gespeeld</span>
74			<span className={"team__stats--stat"}>
75			{extraStats.gamesPlayed}
76			</span>
77			<span className={"team__stats--label"}>Gewonnen</span>
78			<span className={"team__stats--stat"}>{extraStats.gamesWon}</span>
79			<span className={"team__stats--label"}>Gelijk</span>
80			<span className={"team__stats--stat"}>{extraStats.gamesEqual}</span>
81			<span className={"team__stats--label"}>Verloren</span>
82			<span className={"team__stats--stat"}>{extraStats.gamesLost}</span>
83			<span className={"team__stats--label"}>Doelpunten</span>
84			<span className={"team__stats--stat"}>
85			{extraStats.goalsScored} voor / {extraStats.goalsAgainst} tegen
86			</span>
87			<span className={"team__stats--label"}>Cleansheets</span>
88			<span className={"team__stats--stat"}>
89			{extraStats.cleanSheets}
90			</span>
91			<span className={"team__stats--label"}>Gele kaarten</span>
92			<span className={"team__stats--stat"}>
93			{extraStats.yellowCards}
94			</span>
95			<span className={"team__stats--label"}>Rode kaarten</span>
96			<span className={"team__stats--stat"}>{extraStats.redCards}</span>
97			<span className={"team__stats--label"}>
98			Wedstrijden niet gescoord
99			</span>
100			<span className={"team__stats--stat"}>{extraStats.notScored}</span>
101			<span className={"team__stats--label"}>Grootste overwinning</span>
102			<span className={"team__stats--stat"}>
103			{extraStats.biggestWin.result} tegen{" "}
104			{extraStats.biggestWin.opponent}
105			</span>
106			<span className={"team__stats--label"}>Grootste verlies</span>
107			<span className={"team__stats--stat"}>
108			{extraStats.biggestLoss.result} tegen{" "}
109			{extraStats.biggestLoss.opponent}
110			</span>
111			<span className={"team__stats--label"}>Meeste doelpunten</span>
112			<span className={"team__stats--stat"}>
113			{extraStats.mostGoals.result} tegen{" "}
114			{extraStats.mostGoals.opponent}
115			</span>
116			<span className={"team__stats--label"}>Topschutters</span>
117			<span className={"team__stats--stat"}>
118			{extraStats.topscorers.sort((a, b) => b.value - a.value).map((player, i) => (
119			<>{player.firstName} {player.lastName} ({player.value})<br/></>
120			))}
121			</span>
122			<span className={"team__stats--label"}>Laatste wedstrijden</span>
123			<span className={"team__stats--stat"}>
124			{extraStats.gameStreak.map((game, i) => (
125			<span
126			className={`team__stats__streak team__stats__streak--${game.result.toLowerCase()}`}
127			title={`${translateGameResult(game.result)}`}
128			>
129			{game.result.charAt(0) !== "E" ? game.result.charAt(0) : "D"}
130			</span>
131			))}
132			</span>
133			</div>
134			</article>
135			)
136			}
137			}
138
139			renderTeamSquadStats = (team) => {
140			if (this.state.loading === false && this.state.data) {
141			const {
142			squadPlayerStatistics = [],
143			} = this.state.data
144
145			squadPlayerStatistics.sort((a, b) => b.minutes - a.minutes)
146
147			return (
148			<article className={"team__stats__detail card"}>
149			<header className={"card__header"}>
150			<h4>Spelers</h4>
151			</header>
152			<div className={"card__content"}>
153			<table className={"team__stats__table team__stats__table--players"}>
154			<thead>
155			<tr>
156			<th
157			className={
158			"team__stats__column team__stats__column--string"
159			}
160			>
161			Speler
162			</th>
163			<th
164			className={
165			"team__stats__column team__stats__column--number"
166			}
167			>
168			<span title="Wedstrijden gespeeld">P</span>
169			</th>
170			<th
171			className={
172			"team__stats__column team__stats__column--number"
173			}
174			>
175			<span title="Wedstrijden gewonnen">W</span>
176			</th>
177			<th
178			className={
179			"team__stats__column team__stats__column--number"
180			}
181			>
182			<span title="Wedstrijden gelijkgespeeld">D</span>
183			</th>
184			<th
185			className={
186			"team__stats__column team__stats__column--number"
187			}
188			>
189			<span title="Wedstrijden verloren">L</span>
190			</th>
191			<th
192			className={
193			"team__stats__column team__stats__column--number"
194			}
195			>
196			<img
197			src={iconCardYellow}
198			title="Gele kaart"
199			alt="Gele kaart"
200			className="team__stats__header_icon"
201			/>
202			</th>
203			<th
204			className={
205			"team__stats__column team__stats__column--number"
206			}
207			>
208			<img
209			src={iconCardRed}
210			title="Rode kaart"
211			alt="Rode kaart"
212			className="team__stats__header_icon"
213			/>
214			</th>
215			<th
216			className={
217			"team__stats__column team__stats__column--number"
218			}
219			>
220			<img
221			src={iconGoal}
222			title="Doelpunt(en) gescoord"
223			alt="Doelpunt(en) gescoord"
224			className="team__stats__header_icon"
225			/>
226			</th>
227			<th
228			className={
229			"team__stats__column team__stats__column--number"
230			}
231			>
232			<img
233			src={iconCleansheet}
234			title="Cleansheets"
235			alt="Cleansheets"
236			className="team__stats__header_icon"
237			/>
238			</th>
239			<th
240			className={
241			"team__stats__column team__stats__column--number"
242			}
243			>
244			<span title="Minuten gespeeld">
245			<Icon icon="fa-clock-o" />
246			</span>
247			</th>
248			</tr>
249			</thead>
250			<tbody>
251			{squadPlayerStatistics.map(function (player) {
252			return (
253			<tr>
254			<td
255			className={
256			"team__stats__column team__stats__column--string"
257			}
258			>
259			{player.firstName} {player.lastName}
260			</td>
261			<td
262			className={
263			"team__stats__column team__stats__column--number"
264			}
265			>
266			{player.gamesPlayed}
267			</td>
268			<td
269			className={
270			"team__stats__column team__stats__column--number"
271			}
272			>
273			{player.gamesWon}
274			</td>
275			<td
276			className={
277			"team__stats__column team__stats__column--number"
278			}
279			>
280			{player.gamesEqual}
281			</td>
282			<td
283			className={
284			"team__stats__column team__stats__column--number"
285			}
286			>
287			{player.gamesLost}
288			</td>
289			<td
290			className={
291			"team__stats__column team__stats__column--number"
292			}
293			>
294			{player.yellowCards}
295			</td>
296			<td
297			className={
298			"team__stats__column team__stats__column--number"
299			}
300			>
301			{player.redCards}
302			</td>
303			<td
304			className={
305			"team__stats__column team__stats__column--number"
306			}
307			>
308			{player.goals}
309			</td>
310			<td
311			className={
312			"team__stats__column team__stats__column--number"
313			}
314			>
315			{player.cleanSheets}
316			</td>
317			<td
318			className={
319			"team__stats__column team__stats__column--number"
320			}
321			>
322			{player.minutes \|\| "0"}'
323			</td>
324			</tr>
325			)
326			})}
327			</tbody>
328			</table>
329			</div>
330			</article>
331			)
332			}
333			}
334
335			render () {
336			const { team } = this.props;
337
338			return (
339			<section className={"team__stats__wrapper"}>{this.renderTeamStats(team)}{this.renderTeamSquadStats(team)}</section>
340			)
341			}
342			}
343
344			// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
345			const query = graphql`
346			query {
347			site {
348			siteMetadata {
349			kcvvPsdApi
350			}
351			}
352			}
353			`
354
355			export default ({ team }) => (
356			<StaticQuery
357			query={query}
358			render={(data) => (
359			<TeamStats
360			// Data is the result of our query.
361			config={data}
362			team={team}
363			/>
364			)}
365			/>
366			)
367

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/player-stats ( 32be2a )

TeamStats.renderTeamSquadStats B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like